<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">{{detail?detail.name:'商品详情'}}</block>
		</cu-custom>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="cu-bar fixed" :class="scrollTop > 300?'bg-white':'vtop'" :style="[{height:CustomBar + 'px'}]">
			<view class="action " @tap="BackPage">
				<text class="cuIcon cuIcon-back"></text>
			</view>
			<view class="content ">
				商品详情
			</view>
			<view class="action align-center flex">
				<text class="cuIcon cuIcon-share " @tap="showShare"></text>
				
			</view>
		</view>
		<!-- #endif -->
		<block v-if="error">
			<view class="text-center errorview">
				<view>
					<view class="text-gray text-lg">商品信息有误</view>
					<view class="cu-btn round margin-top" :class="'line-'+theme">返回</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="product-swiper relative" :style="'height:'+swiperHeight+'px;'">
				
				<!-- #ifndef MP-WEIXIN -->
				<swiper class="screen-swiper" :indicator-dots="false" :autoplay="true" interval="5000" duration="500" @change="swiperChannelHandle"
				 v-if="detail" :style="'height:'+swiperHeight+'px;'">
					<swiper-item v-for="(item,index) in detail.picture" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<!-- #endif -->
				<view class="absolute swiper-dot-view text-white" v-if="detail">
					{{swiperCurrent+1}}/{{detail.picture.length}}
				</view>
			</view>
			
			<block if="detail">
				<block >
					<view class="bg-red flex space-between padding">
						<!-- <view class="w100 ">
							<view class="text-price text-xl text-bold">{{detail.price}}</view>
							<view class="text-decoration text-price">{{detail.marketing_price}}</view>
						</view> -->
						<!-- <view class="cu-btn round bg-white text-red">再减￥10</view> -->
						<!-- <view class="margin-left text-right">
							
							<view class="" v-if="detail.marketing && detail.marketing.end_time">
								剩余时间：
								<CountDown :value="parseInt(detail.marketing.end_time)" :skin="'skin3'"></CountDown>
							</view>
						</view> -->
					</view>
					<view class="market-name-box">
						<view class="title-desc">
							<view class="title-box">
								
								<text class="title">{{detail?detail.name:''}}</text>
							</view>
						</view>
					</view>
				</block>
				<block >
					<view class="bg-white padding-tb">
						<view class="margin-lr text-lg ">
							<view class="">
								<text class="text-price text-xl text-red">{{detail?detail.wholesale_price:'-'}}</text>
							</view>
						</view>
						<view class="space-between margin-lr margin-tb">
							<view class="">
								<text class="text-gray">预售总数{{detail?detail.join_num:'-'}}</text>
							</view>
							<view class="text-gray ">剩余数量：{{detail?detail.sy_num:'-'}}</view>
						</view>
						<view class="margin-lr margin-tb" v-if=" detail">
							<view class="">
								<text class="text-gray">认购进度<cmd-progress :percent="detail.jd_num" stroke-color="#fe2772"></cmd-progress></text>
							</view>
						</view>
						<view class="margin-lr margin-tb">
							
							<view class="uni-numbox" v-if="cartProductNumber && cartProductNumber > 0"> 购买数量:
							    <view class="uni-numbox-minus"  @click="_calcValue('subtract')">-</view>  
							    <input class="uni-numbox-value" type="number" :disabled="false" :value="cartProductNumber"  @blur="_onBlur">
							    <view class="uni-numbox-plus" @click="_calcValue('add')">+</view>  
							</view>  
							<view v-else>
								购买数量:
								<text class="cuIcon cuIcon-add  default" @click="_calcValue('add')"></text>
							</view>
						<!-- <text class="cuIcon cuIcon-move  default" v-if="cartProductNumber && cartProductNumber > 0" @tap="delCart"></text>
						<text class="text-lg padding-lr-sm" v-if="cartProductNumber && cartProductNumber > 0"><input class="uni-numbox-value" type="number" :disabled="true" :value="cartProductNumber"></text>
						<text class="cuIcon cuIcon-add  default" @tap="addCart"></text> -->
						</view>
					</view>
				</block>
				

				<!-- <view class="bg-white space-between padding  align-center " >
					<view class="action">商品类型</view>
					<view>
						<block v-if="detail.point_exchange_type == 2">积分加现金购买:{{detail.point_exchange}}积分</block>
						<block v-if="detail.point_exchange_type == 3">积分兑换或直接购买:{{detail.point_exchange}}积分</block>
						<block v-if="detail.point_exchange_type == 4">只支持积分兑换:{{detail.point_exchange}}积分</block>
						<block v-if="detail.whole_exchange_type == 2">只支持秒杀券兑换:{{detail.whole_exchange}}秒杀券</block>
						<block v-if="detail.thing_exchange_type == 2">只支持好东西积分兑换:{{detail.thing_exchange}}好东西积分</block>
					</view>
				</view> -->
				
				
				<view class="bg-white margin-top">
					<view class="overflow">
						<view class="text-center margin-tb text-lg text-black">—— 商品详情 ——</view>
						<view class="content" v-if="detail">
							<rich-text :nodes="detail.intro"></rich-text>
						</view>
					</view>
				</view>



				<view class="main-ctr">
					<view class="blackbg round blackbg1 text-white" @tap="onTop" v-if="scrollTop > 300">
						<text class="cuIcon-top"></text>
					</view>
				</view>

				<view class="cu-bar bg-white tabbar  shop  foot" v-if="detail">
					<view class="action text-black" @tap="goPage('/pages/shop/index')">
						<view class="cuIcon-home"></view> 首页
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="action" open-type="contact">
						<view class="cuIcon-service text-black">
							<!-- <view class="cu-tag badge"></view> -->
						</view>
						客服
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button class="action" @tap="openServiceModal">
						<view class="cuIcon-service text-black">
							<!-- <view class="cu-tag badge"></view> -->
						</view>
						客服
					</button>
					<!-- #endif -->
					
					<view class="btn-group  margin-left">
						
						<block >
							<block v-if="detail && detail.is_close<1">
								<!-- <button class="cu-btn light round-left w100 openbuy" :class="'bg-'+theme" @tap="openBuy">直接购买</button> -->
								<button class="cu-btn light round-left w100 openbuy1 " :class="'bg-'+theme" @tap="sellBuy">我要参与</button>
								<button class="cu-btn  round-right  w100 openbuy" :class="'bg-'+theme" @tap="sellBuy">
									代销分成
								</button>
							</block>
							
							<block v-else>
								<button class="cu-btn light round-left w100 closebuy"  @tap="closebuy">我要参与</button>
								<button class="cu-btn  round-right  w100 closebuy" @tap="closebuy">
									代销分成
								</button>
							</block>
							
							
						</block>
					</view>
				</view>
			</block>
		</block>
		<view class="cu-modal" :class="modalName=='passwordModal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar  justify-end">
					<view class="content">请输入支付密码</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top" style="border: 1px solid #CCCCCC;">
							<view class="title">密码</view>
							<input v-model="password" type="password" placeholder="请输入支付密码" name="input"></input>
						</view>
					</form>
					<view class="cu-btn bg-red round margin-top xl w100" @tap="checkpassword">确定</view>
					<view class="text-blue margin-top" @tap="goPage('/pages/member/password2')">修改支付密码</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='joinModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择支付方式</view>
					<view class="action" @tap="hideModal">
						取消
					</view>
				</view>
				<view class="bg-white overflow text-left">
					<view class="  ">
						<view class="margin-lr-xl" v-if="member">
							<view class="space-between solid-bottom padding-tb-sm align-center">
								<view class="cu-avatar bg-white">
									<image src="http://mdm2021.oss-cn-shenzhen.aliyuncs.com/images/2021/06/25/image_1624588878_wzGY8ugc.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">应付金额</view>
								</view>
								<view class="goods_moneys">
									<text style="color:red">¥{{pay_money}}</text>
								</view>
							</view>
							<!-- #ifdef H5 -->
							<view class="space-between solid-bottom padding-tb-sm align-center" @tap="PaymentBingChange('wechat')" v-if="detail && detail.payment_list.order_wechat_pay == 1">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/h5/icon-wechat.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">微信支付</view>
									<view class="text-gray text-sm">推荐使用微信支付</view>
								</view>
								<view class="">
									<radio :class="payment=='wechat'?'checked':''" :checked="payment=='wechat'?true:false" value="wechat"></radio>
								</view>
							</view>
							<!-- #endif -->
							
							
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('default')" v-if="detail && detail.payment_list.order_credit_pay == 1">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">余额支付</view>
									<view class="text-gray text-sm">可用余额 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.user_money}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='default'?'checked':''" :checked="payment=='default'?true:false" value="default"></radio>
								</view>
							</view>
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('wallet')" v-if="detail && detail.payment_list.order_wallet_pay == 1">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">钱包支付</view>
									<view class="text-gray text-sm">钱包余额 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.wait_integral}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='wallet'?'checked':''" :checked="payment=='wallet'?true:false" value="wallet"></radio>
								</view>
							</view>
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('integral')" v-if="detail && detail.payment_list.order_integral_pay == 1">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">积分支付</view>
									<view class="text-gray text-sm">可用积分 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.user_integral}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='integral'?'checked':''" :checked="payment=='integral'?true:false" value="integral"></radio>
								</view>
							</view>
							
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('alipay')" v-if="detail && detail.payment_list.order_ali_pay == 1">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/11/12/image_1605148466_y8CAI0ty.jpg" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">支付宝支付</view>
									<view class="text-gray text-sm">推荐使用支付宝支付</view>
								</view>
								<view class="">
									<radio :class="payment=='alipay'?'checked':''" :checked="payment=='alipay'?true:false" value="alipay"></radio>
								</view>
							</view>
							
							<view class="w100 margin-tb-xl">
								<view class="cu-btn bg-yellow xl round w100" @tap="payOnSubmit">确定支付</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<ShareView ref="ShareView"></ShareView>
		<serviceView ref="serviceView"></serviceView>
		
		<Foot></Foot>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import serviceView from '@/components/default/serviceView.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import Foot from '@/components/default/foot.vue'
	import mpHtml from '@/components/mp-html/mp-html.vue';
	
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			cmdProgress,
			ShareView,
			serviceView,
			Foot,
			mpHtml,
		},
		computed: {
			...mapState(['hasLogin']),
			
		},
		data() {
			return {
				id: 0,
				member: null,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				detail: null,
				swiperHeight: 0,
				swiperCurrent: 0,
				modalName: null,
				scrollTop: 0,
				cartNum: 0,
				error: false,
				cartProductNumber: 1,
				step:1,
				hasMore:true,
				loading:false,
				returnLoading:false,
				payLoading:false,
				joinLoading:false,
				payteamLoading:false,
				comment:null,
				joinLog:null,
				payment: 'wechat',
				pay_money:0,
				password:'',
				checkLoading:false,
				page:1
			};
		},
		onShow() {
			this.getProduct()
		},
		onLoad(option) {
			this.id = option.id
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
			}
			
			if (option.share_id) {}
			this.$common.getConfig().then((config) => {
				this.config = config
				this.$nextTick(function() {
					uni.startPullDownRefresh({})
				})
			})
			this.swiperHeight = this.windowWidth
		},
		onReady() {},
		methods: {
			_onBlur(e){
				let value = e.detail.value;
				if (!value) {  
				    this.cartProductNumber = 0;  
				    return  
				}  
				this.cartProductNumber=value
			},
			_calcValue(type) {
			    const scale = this._getDecimalScale();  
			    let value = this.cartProductNumber * scale;  
			    let step = this.step * scale;  
			
			    if (type === 'subtract') {  
			        value -= step  
			    } else if (type === 'add') {  
			        value += step  
			    }  
			    if (value < 0 ) {  
			        return  
			    }  
			    this.cartProductNumber = value / scale;  
			},  
			_getDecimalScale() {
			    let scale = 1;  
			    // 浮点型  
			    if (~~this.step !== this.step) {  
			        scale = Math.pow(10, (this.step + '').split('.')[1].length);  
			    }  
			    return scale;  
			},  
			closebuy(){
				this.$common.showError('产品已售罄')
				return
			},
			PaymentBingChange(e) {
				this.payment = e
			},
			sellBuy(){
				
				if(this.cartProductNumber<1){
					this.$common.showError('购买数量不能小于1')
					return
				}
				if(parseInt(this.cartProductNumber)>parseInt(this.detail.sy_num)){
					this.$common.showError('购买数量不能大于剩余份数'+this.detail.sy_num)
					return
				}
				if (this.payteamLoading) return
				this.payteamLoading = true
				uni.showModal({
					title: '系统提示',
					content: '本产品完成销售,您的本金将返回支付账户,并获得额外的代销收益',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							})
							this.$http
								.post('sell_order_cream', {
									order_id:this.detail.id,
									num:this.cartProductNumber,
								})
								.then((response) => {
									this.payteamLoading = false
									uni.hideLoading()
									this.joinLog=response.data.data
									this.pay_money=this.joinLog.pay_money
									this.modalName='joinModal'
								})
								.catch((response) => {
									this.payteamLoading = false
									uni.hideLoading()
								})
							
						}else {
							this.payteamLoading = false
						}
					},
				})
			},
			openBuy(){
				if(this.cartProductNumber<1){
					this.$common.showError('购买数量不能小于1')
					return
				}
				if(parseInt(this.cartProductNumber)>parseInt(this.detail.sy_num)){
			
					this.$common.showError('购买数量不能大于剩余份数'+this.detail.sy_num)
					return
				}
				
				if (this.returnLoading) return
				this.returnLoading = true
				uni.showModal({
					title: '系统提示',
					content: '是否确认直接购买此商品',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							})
							
							var param = {
								sku_id: this.detail.id,
								num: this.cartProductNumber,
							}
							this.returnLoading = false
							console.log(param)
							let type='sell'
							let urlParams = "?type=" + type + "&merchant_id=" + this.merchant_id + "&data=" + decodeURIComponent(JSON.stringify(
								param))
								console.log(urlParams)
							uni.navigateTo({
								url: "/pages/shop/order/settle" + urlParams
							})
							
						} else {
							this.returnLoading = false
						}
					},
				})
			},
			payOnSubmit() {
				let _this = this
				if(!this.joinLog) this.$common.showError('信息有误')
				if (this.payLoading ) return
				if (this.payment == 'integral') {
					var paym = this.joinLog.pay_money * this.config.integral_withdraw
					if (parseFloat(this.member.account.user_integral) < paym) {
						this.$common.showError('积分不足')
						this.joinLoading = false
						return
					}
					uni.showModal({
						title: '是否确定支付订单，将扣除积分￥' + paym,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(1)
							} else {
								_this.payLoading = false
								_this.joinLoading = false
							}
						},
						fail() {
							_this.payLoading = false
							_this.joinLoading = false
						}
					})
				}else if (this.payment == 'wallet') {
					if (parseFloat(this.member.account.wait_integral) < parseFloat(this.joinLog.pay_money)) {
						this.$common.showError('钱包余额不足')
						this.joinLoading = false
						return
					}
					uni.showModal({
						title: '是否确定支付订单，将扣除余额￥' + this.joinLog.pay_money,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(3)
							} else {
								_this.payLoading = false
								_this.joinLoading = false
							}
						},
						fail() {
							_this.payLoading = false
							_this.joinLoading = false
						}
					})
				}  else if (this.payment == 'default') {
					if (parseFloat(this.member.account.user_money) < parseFloat(this.joinLog.pay_money)) {
						this.$common.showError('余额不足')
						this.joinLoading = false
						return
					}
					uni.showModal({
						title: '是否确定支付订单，将扣除余额￥' + this.joinLog.pay_money,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(0)
							} else {
								_this.payLoading = false
								_this.joinLoading = false
							}
						},
						fail() {
							_this.payLoading = false
							_this.joinLoading = false
						}
					})
				} else if (this.payment == 'wechat') {
					this.payLoading = true
					// #ifdef MP-WEIXIN
					this.mini_pay(this.id)
					// #endif
			
					// #ifdef H5
					this.$jwx.createPay('pre_sell', {
							"log_id": this.joinLog.id
						}).then((response) => {
							this.$common.showSuccess('支付成功', (r) => {
								// this.getProduct()
								this.modalName=''
								this.joinLoading = false
								this.payLoading = false
								uni.redirectTo({
									url: "/pages/member/wait_integral/index"
								})
							})
						})
						.catch((response) => {
							this.loading = false
							this.payLoading = false
							this.joinLoading = false
			
						})
					return
					// #endif
			
					// #ifdef APP-VUE
					this.$http.post('pay', {
							pay_type: 1,
							trade_type: 'app',
							order_group: 'pre_sell',
							data: JSON.stringify({
								"log_id": this.log.id
							})
						})
						.then((response) => {
			
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: response.data.data.config,
								success: (e) => {
									this.payLoading = false
									this.joinLoading = false
									this.$common.showSuccess('支付成功', (r) => {
										this.joinLoading = false
										// this.getProduct()
										uni.redirectTo({
											url: "/pages/member/wait_integral/index"
										})
									})
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败,原因为: " + e.errMsg,
										showCancel: false
									})
			
									this.payLoading = false
			
									this.joinLoading = false
								},
								complete: () => {
									this.payLoading = false
									this.joinLoading = false
								}
							})
						})
						.catch((response) => {
							this.loading = false
							this.payLoading = false
						})
					// #endif
			
				} else if (this.payment == 'alipay') {
					// #ifdef H5
					this.applypay();
					// #endif
					// #ifdef APP-VUE
					this.alipay()
					return 
					// #endif
				} else {
					this.$common.showError('请选择正确的支付方式')
				}
			},
			applypay(){
				// #ifdef H5
				if (this.joinLog.id > 0) {
					var url = this.config.web_url + 'site/whrder?type=pre_sell&id=' + this.joinLog.id + '&member_id=' + this.member.id
					window.open(url)
				} else {
					this.$common.showError('支付参数错误')
					this.loading = false
					this.payLoading = false
					return 
				}
					
				// #endif
			},
			alipay(){
				this.$http.post('pay', {
					pay_type: 2,
					trade_type: 'app',
					order_group: 'pre_sell',
					data: JSON.stringify({
						"log_id": this.joinLog.id
					})
				})
				.then((response) => {
					uni.requestPayment({
							provider: 'alipay',
							orderInfo: response.data.data.config.config,
							success: (e) => {
								this.$common.showSuccess('支付成功', (res) => {
									this.modalName=''
									// this.getProduct()
									this.joinLoading = false
									this.payLoading = false;
									this.$common.rmCache('member')
									uni.redirectTo({
										url: "/pages/member/wait_integral/index"
									})
								})
							},
							fail: (e) => {
								uni.showModal({
									//content: "支付失败,原因为: " + e.errMsg,
									content: "抱歉，您的支付不成功",
									showCancel: false
								})
								this.loading = false
							},
							complete: () => {
							}
						})
				})
				.catch((response) => {
					reject(response)
				})
			},
			payUserMoney(frozen) {
				console.log(this.joinLog.id)
				if (this.payLoading) return ;
				this.payLoading = true
				this.$http.post('pay', {
						pay_type: 5,
						order_group: "pre_sell",
						frozen: frozen,
						data: JSON.stringify({
							"log_id": this.joinLog.id
						})
					})
					.then((response) => {
						this.loading = false
						uni.hideLoading()
						this.$common.showSuccess('支付成功', (res) => {
							this.modalName=''
							// this.getProduct()
							this.joinLoading = false
							this.payLoading = false;
							this.$common.rmCache('member')
							uni.redirectTo({
								url: "/pages/member/wait_integral/index"
							})
						})
					})
					.catch((response) => {
						this.loading = false
						uni.hideLoading()
						this.loading = false
						this.payLoading = false
						this.joinLoading = false
					})
			},
			checkpassword() {
				if(this.checkLoading) return
				this.checkLoading = true
				uni.showLoading({
					title: '处理中'
				})
				this.$http.post('check_pay_pw', {
					password: this.password,
				}).then((response) => {
					uni.hideLoading()
					this.$common.showSuccess('验证通过')
					this.cardKf()
				this.checkLoading = false
				}).catch((response) => {
					uni.hideLoading()
				this.checkLoading = false
				})
			},
			
			swiperChannelHandle(e) {
				this.swiperCurrent = e.detail.current
			},
			
			getProduct() {
				this.$http
					.get('sell_product_view', {
						id: this.id
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						var detail = response.data.data
						detail.intro = this.$common.mathRichText(response.data.data.content)
						detail.name=detail.title
						this.detail = detail
						console.log(response.data.data.content)
						this.$jwx.readyShare(detail.name,detail.name,detail.share_url,detail.picture)
						this.$common.getMember(true).then((member) => {
							this.member = member
							console.log(this.member)
							if(this.member.nickname){
								var name =this.member.nickname + '邀请您购买秒杀产品'+detail.name
							}else{
								var name ='用户id:'+this.member.id + '邀请您购买秒杀产品'+detail.name
							}
						this.$jwx.readyShare(name,detail.name,detail.share_url,detail.picture)	
						})
						
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
						this.error = true
					})
			},
			openServiceModal() {
				this.$refs.serviceView.show()
				// window.open('https://uclient.yunque360.com/frame.html?company_id=cjch051hm27mtl')
				// (function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/647cfb665881c5ee62274c0e78aaad3b0/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();
			},
			showShare() {
				this.$common.getMember(true).then((member) => {
					this.member = member
					if (this.detail) {
						this.$refs.ShareView.show({
							type: 'product',
							id: this.detail.id,
							thumb: this.detail.picture,
							name: this.detail.name,
							price: this.detail.marketing_id > 0 ? this.detail.marketing_price : this.detail.price,
							share_url: this.detail.share_url,
							member_id: this.member.id,
							member_name: this.member.nickname,
							member_head: this.member.head_portrait,
							reget: true
						})
					}
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			
			onTop: function(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			BackPage() {
				uni.navigateBack({})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			
			showLocation() {
				// console.log(this.detail.merchant.longitude+'-'+this.detail.merchant.latitude)
				uni.openLocation({
					longitude: parseFloat(this.detail.merchant.longitude),
					latitude: parseFloat(this.detail.merchant.latitude),
					success: (res) => {},
					fail: (error) => {
						this.$common.showError(error)
					}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/goods?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.name,
				imageUrl: this.detail.picture,
				path: path
			}
		},
		onPullDownRefresh() {
			this.getProduct()
		},
		onReachBottom() {
			
		}
	}
</script>
<style>  
    .uni-numbox {  
        display: flex;  
        flex-direction: row;  
        justify-content: flex-start;  
        height: 50upx;  
    }  

    .uni-numbox-minus,  
    .uni-numbox-plus {  
        margin: 0;  
        background-color: #FEFEFE;  
        width: 60upx;  
        height: 100%;  
        line-height: 48upx;  
        text-align: center;
        color: #333333;  
    }  

    .uni-numbox-minus {  
        border: 2upx solid #EEE;  
        border-right: none;  
        border-top-left-radius: 20upx;  
        border-bottom-left-radius: 20upx;  
    }  

    .uni-numbox-plus {  
        border: 2upx solid #EEE;  
        border-left: none;  
        border-top-right-radius: 20upx;  
        border-bottom-right-radius: 20upx;  
    }  

    .uni-numbox-value {  
        border: 2upx solid #eeeeee;  
        background-color: #ffffff;  
        width: 100upx;  
        height: 100%;  
        text-align: center;  
    }  

    .uni-numbox-disabled {  
        color: #333;  
    }  
</style>  
<style>
	.vtop {
		box-shadow: none;
		background-color: none;
	}
	.openbuy{
		color: #FFFFFF;
		background-color: #fe2772;
	}
	.openbuy1{
		color: #FFFFFF;
		background-color: #222222;
	}
	.closebuy{
		color: #FFFFFF;
		background-color: #8b8687;
	}

	.product-swiper .vtop {
		right: 20rpx;
		top: 20rpx;
		z-index: 65;
	}

	.vtop .cuIcon {
		color: #FFF;
		border-radius: 50%;
		padding: 10rpx 12rpx;
	}

	.vtop .content {
		display: none;
	}

	.swiper-dot-view {
		right: 0;
		bottom: 10rpx;
		border-radius: 20rpx 0 0 20rpx;
		padding: 5rpx 20rpx;
	}

	.share {
		border-radius: 0;
		font-size: 30rpx;
		padding: 0;
		background: none;
	}

	.share::after {
		display: none;
	}

	.product-name {
		line-height: 45rpx;
		text-align: justify;
	}

	.heightover {
		height: 100vh;
		overflow: hidden;
	}

	.border-radius-top {
		border-radius: 30rpx 30rpx 0 0 !important;
	}

	.color-view {
		width: 80rpx;
		height: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 100upx;
	}

	.round-left {
		border-radius: 40rpx 0 0 40rpx;
	}

	.round-right {
		border-radius: 0 40rpx 40rpx 0;
	}

	.main-ctr {
		position: fixed;
		z-index: 99;
		bottom: 140rpx;
		right: 30rpx;
	}

	.blackbg {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.errorview {
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu .content {
		width: 100rpx;
		min-width: 100rpx;
	}

	.text-justify {
		text-align: justify;
	}

	.sharebtn {
		background-color: unset;
		font-size: unset;
		padding: 0;
		display: inline;
	}

	.sharebtn::after {
		content: unset;
	}

	.roundbtn {
		width: 30upx;
		height: 30upx;
		border: 1px solid #0081FF;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		line-height: 30upx;
		color: #0081FF;
	}

	.cardbg {
		width: 100%;
		height: 100upx;
	}

	.card {
		width: 100upx;
		height: 100upx;
		min-width: 100upx;
	}

	.card .caredpeople {
		width: 100%;
		left: 0;
		bottom: 30px;
		z-index: 0;
		top: unset;
	}

	.settlebtn {
		min-width: 140rpx;
		border-radius: 0 100rpx 100rpx 0;
		height: 100%;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.noshadown {
		box-shadow: unset;
	}
</style>

<style>
	.market-name-box{
		padding:  18rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.market-name-box .title-desc{
		flex: 1;
	}
	.title-desc .title-box{
		display: flex;
		align-items: center;
	}
	.title-desc .title-box .round-spec{
		flex-shrink: 0;
		padding: 0 20rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #FEED8C;
		border-radius: 18rpx;
		font-size: 24rpx;
		color: #000000;
		margin-right: 10rpx;
	}
	.title-desc .title-box .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.title-desc .description{
		font-size: 20rpx;
		color: #000000;
		line-height: 34rpx;
		opacity: 0.64;
	}
	.market-name-box .sold-share{
		width: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	.sold-share .solid{
		font-size: 22rpx;
		color: #000000;
		line-height: 15rpx;
		opacity: 0.8;
	}
	.sold-share .solid text{
		margin: 0 10rpx;
	}
	.sold-share .share{
		margin-top: 36rpx;
		width: 124rpx;
		height: 124rpx;
		background-color: #C3A060;
		border-radius: 10rpx;
		padding: 30rpx;
		text-align: center;
		line-height: 34rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
</style>

<style>
	.picker-box{
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	.picker-line{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #707070;
	}
	.picker-line .name{
		margin: 0 25rpx;
		font-size: 26rpx;
		color: #3C3A3A;
		opacity: 0.70;
	}
	.picker-line .content{
		flex: 1;
		font-size: 28rpx;
		font-weight: bold;
		color: #484343;
		opacity: 0.70;
	}
	
	.group-buy-box{
		background-color: #FFFFFF;
		padding: 50rpx 30rpx;
	}
	.group-buy-box .total-detail{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.group-buy-box .total-detail .num{
		font-size: 38rpx;
		font-weight: bold;
		color: #990000;
		margin-right: 20rpx;
	}
	.group-buy-box .total-detail .note{
		flex: 1;
		font-size: 28rpx;
		color: #000000;
	}
	.group-buy-box .total-detail .status{
		font-size: 26rpx;
		color: #000000;
	}
	.group-buy-box .record-list{
		margin-top: 30rpx;
	}
	.record-list swiper{
		height: 80rpx;
	}
	.record-list swiper-item{
		height: 100%;
	}
	.record-list .record{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.record-list .record image{
		width: 60rpx;
		height: 60rpx;
		border: 1rpx solid #EAEAEA;
		margin-right: 20rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.record-list .record text{
		font-size: 28rpx;
		color: #000000;
		line-height: 34rpx;
	}
</style>

<style>
	.evaluate-line{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #707070;
	}
	.evaluate-line .name{
		font-size: 28rpx;
		color: #000000;
	}
	.evaluate-box{
		margin-top: 10rpx;
		background-color: #FFFFFF;
		padding: 10rpx 30rpx 40rpx;
	}
	.evaluate-box .top-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-title .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-title .more{
		font-size: 26rpx;
		color: #999999;
	}

	.evaluate-item{
		padding-top: 30rpx;
	}
	.evaluate-item .user-star{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .user-avatar{
		border: 1rpx solid #EAEAEA;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
		flex-shrink: 0;
	}
	.user-star .user-name{
		flex: 1;
		font-size: 28rpx;
		color: #999999;
	}
	.user-star .star{
		width: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .star image{
		width: 17rpx;
		height: 17rpx;
	}
	
	.evaluate-item .content{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.evaluate-item .thumbs{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	.evaluate-item .thumbs image{
		width: 144rpx;
		height: 154rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-right: 36rpx;
	}
	.evaluate-item .thumbs image:nth-child(4n){
		margin-right: 0;
	}
</style>
